<template>
    <div class="form">
        <el-form ref="ruleFormRef" :model="formData" status-icon :rules="rules" label-position="left" @validate="validate" label-width="auto" :validate-on-rule-change="false">
            <el-row align="middle" :gutter="30" justify="start">
                <template v-for="(item, index) in formConfig" :key="item.formName">
                    <el-col v-bind="layout" class="row">
                        <el-form-item :label="item.labelName" :prop="item.formName" :class="[item.isNoFlex ? 'form-item' : '']">
                            <template v-if="item.formType === 'text'">
                                <span style="color: #666">{{ formData[item.formName] }}</span>
                            </template>
                            <template v-if="item.formType === 'input'">
                                <el-input
                                    v-model="formData[item.formName]"
                                    autocomplete="off"
                                    :placeholder="item.placeholder"
                                    :style="{ width: item.style.width }"
                                    :autosize="{ minRows: item.minRows }"
                                    :type="item.type"
                                    :maxlength="item.maxlength"
                                    @input="if (formData[item.formName].length > item.maxlength) formData[item.formName] = formData[item.formName].slice(0, item.maxlength);"
                                />
                            </template>
                            <template v-else-if="item.formType === 'select'">
                                <el-select
                                    v-model="formData[item.formName]"
                                    :placeholder="item.placeholder"
                                    :style="{ width: item.style.width }"
                                    :filterable="item.filterable"
                                    :remote="item.remote"
                                    :remote-method="remoteMethod"
                                    @change="selectChange($event, item.formName)"
                                    :suffix-icon="CaretBottom"
                                >
                                    <el-option v-for="select in item.options" :key="select.value" :label="select.label" :value="select.value">
                                        <template v-if="item.isSlot">
                                            <div class="select-item" style="display: flex; align-items: center">
                                                <i class="iconfont" :class="[select.label]"></i>
                                                <span style="margin-left: 5px">{{ select.label }}</span>
                                            </div>
                                        </template>
                                    </el-option>
                                </el-select>
                            </template>
                            <template v-else-if="item.formType === 'dataPicker'">
                                <el-date-picker
                                    v-model="formData[item.formName]"
                                    :type="item.type"
                                    :start-placeholder="item.startPlaceholder"
                                    :end-placeholder="item.endPlaceholder"
                                    :placeholder="item.placeholder"
                                    :style="{ width: item.style.width }"
                                />
                            </template>
                            <template v-else-if="item.formType === 'radio'">
                                <el-radio-group v-model="formData[item.formName]" :disabled="item.disabled">
                                    <el-radio v-for="item in item.options" :label="item.value">{{ item.label }}</el-radio>
                                </el-radio-group>
                            </template>
                            <template v-else-if="item.formType === 'checkbox'">
                                <el-checkbox-group v-model="formData[item.formName]" :disabled="item.disabled" @change="checkboxGroupChange($event, item.formName)">
                                    <el-checkbox v-for="item in item.options" :label="item.value">{{ item.label }}</el-checkbox>
                                </el-checkbox-group>
                            </template>
                            <template v-else>
                                <slot :name="item.formType"></slot>
                            </template>
                        </el-form-item>
                    </el-col>
                </template>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { CaretBottom } from "@element-plus/icons-vue";
defineProps({
    formData: {
        type: Object,
        default: () => ({})
    },
    formConfig: {
        type: Object,
        default: () => ({})
    },
    layout: {
        type: Object,
        default: () => ({
            xs: 24,
            sm: 24,
            md: 24,
            lg: 24,
            xl: 24
        })
    },
    rules: {
        type: Object,
        default: () => ({})
    }
});
const emits = defineEmits(["validate", "remoteMethod", "checkboxGroupChange", "selectChange"]);
const ruleFormRef = ref(null);
const validate = (prop, isValid) => {
    emits("validate", prop, isValid);
};
const remoteMethod = (query) => {
    emits("remoteMethod", query);
};
const selectChange = (val, formName) => {
    emits("selectChange", val, formName);
};
const checkboxGroupChange = (val, formName) => {
    emits("checkboxGroupChange", val, formName);
};
defineExpose({
    ruleFormRef
});
</script>

<style lang="less" scoped>
.form {
    flex: 1;
    margin-top: 10px;
    :deep(.el-form-item) {
        margin-bottom: 0;
    }

    .row {
        margin-bottom: 20px;
        .form-item {
            display: block;
        }
    }

    :deep(.el-form-item__label) {
        font-size: 14px;
        font-weight: 400;
        color: #1b3646;
    }
    :deep(.el-input__wrapper) {
        width: 100%;
        box-sizing: border-box;
    }
}
</style>
